<template>
  <div class="editaddress">
    <van-nav-bar
      title="编辑地址"
      left-arrow
      right-text="删除"
      @click-left="onClickLeft"
      @click-right="delete_address"
    />
    <van-address-edit
      :area-list="areaList"
      show-set-default
      show-search-result
      show-delete
      :address-info="info"
      save-button-text="确定"
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />
  </div>
</template>
<script>
import areaList from "@/../mock/area";
import { Dialog } from "vant";
import address_search_list from "@/../mock/address_search_list";
export default {
  data() {
    return {
      // 当前页面的id
      id: "",
      // 具体用户信息
      info: {
        // name: "卢新安",
        // tel: 18390208201,
        // addressDetail: "麓谷企业广场 A2栋3单元 306"
      },
      // 省市县列表
      areaList,
      // 默认详细地址
      searchResult: [],
      // 本地用户地址列表
      editaddreslist: []
    };
  },
  created() {
    // console.log(this.$route.params.id);
    this.id = this.$route.params.id;
    this.getaddressinfo();
    // console.log(this.$store.state.address_id); //id还没写
    // console.log(JSON.parse(localStorage.getItem("address_data_list") || "[]"));
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSave(edit_info) {
      let addressinfolist = [];
      let num = 0;
      // console.log(edit_info,this.editaddreslist)
      this.editaddreslist.forEach((el, index) => {
        if (el.id == edit_info.id) {
          el = edit_info;
          num = el.id;
          addressinfolist.push(edit_info);
        } else {
          addressinfolist.push(el);
        }
      });
      // 选中的id
      // console.log(num);
      // 当只有一条时 且为fasle
      if (addressinfolist.length == 1 && edit_info.isDefault == false) {
        this.$Toast("已自动将当前地址设为默认地址");
        addressinfolist[0].isDefault = true;
      }
      if (addressinfolist.length > 1) {
        addressinfolist.forEach((el, index) => {
          if (el.id == num) {
            if (el.isDefault == true) {
              addressinfolist.forEach((el, index) => {
                if (el.id == num) {
                  el.isDefault = true;
                } else {
                  el.isDefault = false;
                }
              });
            } else {
              addressinfolist.forEach((el, index) => {
                el.isDefault = false;
              });
              addressinfolist[0].isDefault = true;
              this.$Toast("默认地址已重置为第一个");
            }
          }
        });
      }
      this.$store.commit("edit_address_data", addressinfolist);
      this.$router.push("/mine/myaddress");
    },
    onDelete() {
      this.delete();
    },
    onChangeDetail(val) {
      this.searchResult = [];
      const search_list = address_search_list.search_list;
      if (val) {
        // 内部的数据
        // console.log(address_search_list)
        // 拿到数据
        // console.log(search_list)
        search_list.forEach((el, index) => {
          if (el.name.indexOf(val) != -1) {
            // console.log(el.name).push
            el.address=""
            el.name+=el.short_address
            console.log(el)
            this.searchResult.push(el);
          }
        });
      } else {
        this.searchResult = [];
      }
    },
    getaddressinfo() {
      // 读取本地数据
      this.editaddreslist = JSON.parse(
        localStorage.getItem("address_data_list") || "[]"
      );
      // console.log(this.editaddreslist)
      // 加载这条数据的信息
      this.editaddreslist.forEach((el, index) => {
        if (el.id == this.id) {
          this.info = el;
        }
      });
      // console.log(this.editaddreslist);
    },
    delete_address() {
      Dialog.confirm({
        message: "确定要删除吗"
      })
        .then(() => {
          this.delete();
        })
        .catch(() => {
          return;
        });
    },
    delete() {
      if (this.editaddreslist.length == 1) {
        Dialog.confirm({
          message: "这已经是最后一条数据您确定要删除吗"
        })
          .then(() => {
            this.delete_data();
            // this.$router.go(0);
          })
          .catch(() => {
            return;
          });
      } else {
        this.delete_data();
      }
    },
    delete_data() {
      let address_list = [];
      var id = this.id;
      var num = 0;
      // 遍历数据
      this.editaddreslist.forEach((el, index) => {
        // 找到正在编辑的这一条数据
        if (el.id == id) {
          // 如果这条数据是默认地址
          if (el.isDefault == true) {
            //将所有数据都设为不是默认
            this.editaddreslist.forEach((el, index) => {
              el.isDefault = false;
            });
            // 将第一条数据设为默认数据
            if (address_list.length > 1) {
              this.editaddreslist[0].isDefault = true;
            } else {
              num = 1;
            }
          }
        } else {
          // 将数据push到数组中
          // console.log(el)
          address_list.push(el);
        }
      });
      if (num == 1 && address_list.length >= 1) {
        address_list[0].isDefault = true;
      }
      // 将数组保存

      this.editaddreslist = [];

      this.$store.commit("edit_address_data", address_list);
      this.getaddressinfo();
      // 跳转路由
       this.$Toast("删除成功");
      this.$router.push("/mine/myaddress");
      window.location.reload()
      // this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
.address {
  .van-nav-bar {
    background-image: linear-gradient(90deg, #0af, #0085ff);
    .van-icon {
      color: #fff;
      font-size: 18px;
    }
    .van-nav-bar__title {
      font-weight: bold;
      color: #fff;
      font-size: 18px;
    }
    .van-nav-bar__right {
      .van-nav-bar__text {
        color: #fff;
        font-size: 15px;
        background-color: #1989fa;
      }
    }
  }
  .van-address-edit[data-v-28589d54] {
    padding: 0px;
    /deep/.van-button {
      border-radius: 0px;
      background-color: #00d762;
      border: 0px;
    }
  }
}
</style>